<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 30px;
            border: 2px solid #f00;
            border-radius: 50%;
        }

        .line {
            position: absolute;
            border-radius: 50% 50% 0 0;
            transform-origin: bottom;
            animation: round 60s steps(60) infinite;
        }

        .second {
            top: 40px;
            left: 148px;
            width: 4px;
            height: 110px;
            background-color: #0f0;
        }

        .minute {
            top: 65px;
            left: 147px;
            width: 6px;
            height: 85px;
            background-color: rgb(15, 141, 224);
            animation-duration: 3600s;
        }

        .hour {
            top: 90px;
            left: 146px;
            width: 8px;
            height: 60px;
            background-color: rgb(34, 37, 197);
            animation-duration: calc(3600s * 12);
        }

        .hour::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: -6px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #f00;
        }

        .ke {
            position: absolute;
            top: 145px;
            left: 149px;
        }

        .ke div {
            position: absolute;
            width: 2px;
            height: 10px;
            background-color: #000;
        }

        .ke div p {
            line-height: 40px;
            text-indent: -4px;
        }

        @keyframes round {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 加全指针，加刻度 -->
    <div class="box">
        <div class="line second"></div>
        <div class="line minute"></div>
        <div class="line hour"></div>

        <div class="ke"></div>
    </div>

    <script type="text/javascript">
        var ke = document.querySelector(".ke");

        // ES6 => `xx ${表达式的值} x` 允许换行写
        var key = "xx";

        var str = "he"+ key +"llo",
            strr = 'he'+ key +'llo',
            strrr = `he`+ key +`llo`;
        
        strrr = `he${ key == "xx" ? 123 : "000" }llo`;
        
        console.log(str, strr, strrr);


        var htmlStr = "";
        for(var i = 0; i < 12; i ++){
            // var dEle = document.createElement("div");
            // dEle.style.transform = "rotate("+ i*30 +"deg) translateY(-145px)";
            // dEle.innerHTML = "<p style='transform: rotate("+ -i*30 +"deg)'>"+ (i == 0 ? 12 : i) +"</p>";
            // ke.append(dEle);
            htmlStr += `<div style="transform: rotate(${ i*30 }deg) translateY(-145px)">
                <p style="transform: rotate(${ -i*30 }deg)">${ i == 0 ? 12 : i }</p>
            </div>`;
        }
        ke.innerHTML = htmlStr;
    </script>
</body>
</html>